<template>
	<view class="custom_forgotpassword">
		<view class="custom_forgotpassword_content" v-if="isLogin">
			<view class="custom_forgotpassword_content_title">{{ i18n('修改密码') }}</view>
			<view class="custom_forgotpassword_content_list">
				<view class="custom_forgotpassword_content_list_input telphone">
					<view class="telphone_tip">+86</view>
					<view class="telphone_input"><input :placeholder="i18n('手机号码')" type="number" maxlength="11" v-model="forgotPassword.account" /></view>
				</view>
				<view class="error_tips" v-if="error.account.Is">
					<view class="iconfont icon-error"></view>
					{{ error.account.message }}
				</view>
				<view class="custom_forgotpassword_content_list_input verifica_code">
					<view class="verifica_code_input"><input :placeholder="i18n('请输入短信验证码')" type="number" v-model="forgotPassword.verificatCode" maxlength="6" /></view>
					<view class="verifica_code_button" v-if="!forgotPassword.isCountDown">
						<view class="verifica_code_button_content button" @click="getVICodeClickHandle">{{ i18n('获取验证码') }}</view>
					</view>
					<view class="verifica_code_button" v-else><uni-countdown :showDay="false" :hour="0" :minute="3" :second="0" @timeup="timeupChangeHandle"></uni-countdown></view>
				</view>
				<view class="error_tips" v-if="error.countDown.Is">
					<view class="iconfont icon-error"></view>
					{{ error.countDown.message }}
				</view>
				<view class="error_tips" v-if="error.verificatCode.Is">
					<view class="iconfont icon-error"></view>
					{{ error.verificatCode.message }}
				</view>
				<view class="custom_forgotpassword_content_list_input verifica_code">
					<view class="verifica_code_input"><input :placeholder="i18n('请输入旧密码')" type="password" v-model="forgotPassword.oldPassword" maxlength="8" /></view>
					<view class="verifica_code_button"></view>
				</view>
				<view class="error_tips" v-if="error.oldPassword.Is">
					<view class="iconfont icon-error"></view>
					{{ error.oldPassword.message }}
				</view>
				<view class="custom_forgotpassword_content_list_input verifica_code">
					<view class="verifica_code_input">
						<input :placeholder="i18n('请输入密码')" :type="forgotPassword.isPasswordShow ? 'text' : 'password'" v-model="forgotPassword.password" maxlength="8" />
					</view>
					<view class="verifica_code_button iconfont">
						<view
							class="verifica_code_button_content toggle_show"
							:class="forgotPassword.isPasswordShow ? 'icon-browse' : 'icon-hide'"
							@click="toggleRegPasswordShow"
						></view>
					</view>
				</view>
				<view class="error_tips" v-if="error.password.Is">
					<view class="iconfont icon-error"></view>
					{{ error.password.message }}
				</view>
				<view class="custom_forgotpassword_content_list_input verifica_code">
					<view class="verifica_code_input"><input :placeholder="i18n('请再次输入密码')" type="password" v-model="forgotPassword.repassword" maxlength="8" /></view>
					<view class="verifica_code_button"></view>
				</view>
				<view class="error_tips" v-if="error.repassword.Is">
					<view class="iconfont icon-error"></view>
					{{ error.repassword.message }}
				</view>
			</view>
			<view class="custom_forgotpassword_content_list_item">
				<view class="submit_button" @click="submitForgotPasswordClickHandle">{{ i18n('保存并重新登录') }}</view>
				<view class="cancle_button" @click="cancleClickHandle">{{ i18n('取消') }}</view>
			</view>
		</view>
		<view class="custom_forgotpassword_content" v-else></view>
		<custom-login-panel :item="{}" v-if="!isLogin"></custom-login-panel>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isLogin: false,
			forgotPassword: {
				account: '',
				verificatCode: '',
				isCountDown: false,
				smsVerificatCode: '',
				oldPassword: '',
				password: '',
				repassword: '',
				isPasswordShow: false
			},
			random: (Math.random(10000) + '').replace(/\./gim, ''),
			error: {
				verificatCode: {
					Is: false,
					message: ''
				},
				account: {
					Is: false,
					message: ''
				},
				oldPassword: {
					Is: false,
					message: ''
				},
				password: {
					Is: false,
					message: ''
				},
				repassword: {
					Is: false,
					message: ''
				},
				countDown: {
					Is: false,
					message: ''
				}
			}
		};
	},
	watch: {
		'forgotPassword.isCountDown'(v) {
			v === true && (this.error.countDown.Is = false);
		},
		'forgotPassword.account'(v) {
			this._plugins.isEmpty(v)
				? ((this.error.account.Is = true), (this.error.account.message = this.i18n('手机号码') + ' ' + this.i18n('不能为空')))
				: !this._plugins.isTelphoneCode(v)
				? ((this.error.account.Is = true), (this.error.account.message = this.i18n('请输入正确的') + ' ' + this.i18n('手机号码')))
				: (this.error.account.Is = false);
		},
		'forgotPassword.verificatCode'(v) {
			this._plugins.isEmpty(v)
				? ((this.error.verificatCode.Is = true), (this.error.verificatCode.message = this.i18n('短信验证码') + ' ' + this.i18n('不能为空')))
				: (this.error.verificatCode.Is = false);
		},
		'forgotPassword.oldPassword'(v) {
			this._plugins.isEmpty(v)
				? ((this.error.oldPassword.Is = true), (this.error.oldPassword.message = this.i18n('密码') + ' ' + this.i18n('不能为空')))
				: !this._plugins.isPassword(v)
				? (this.error.oldPassword = {
						Is: true,
						message: this.i18n('密码') + this.i18n('格式/长度不对')
				  })
				: (this.error.oldPassword.Is = false);
		},
		'forgotPassword.password'(v) {
			this._plugins.isEmpty(v)
				? ((this.error.password.Is = true), (this.error.password.message = this.i18n('密码') + ' ' + this.i18n('不能为空')))
				: !this._plugins.isPassword(v)
				? (this.error.password = {
						Is: true,
						message: this.i18n('密码') + this.i18n('格式/长度不对')
				  })
				: (this.error.password.Is = false);
		},
		'forgotPassword.repassword'(v) {
			this._plugins.isEmpty(v)
				? ((this.error.repassword.Is = true), (this.error.repassword.message = this.i18n('密码') + ' ' + this.i18n('不能为空')))
				: !this._plugins.isPassword(v)
				? (this.error.repassword = {
						Is: true,
						message: this.i18n('密码') + this.i18n('格式/长度不对')
				  })
				: v !== this.forgotPassword.password
				? ((this.error.repassword.Is = true), (this.error.repassword.message = this.i18n('密码') + ' ' + this.i18n('不相同')))
				: (this.error.repassword.Is = false);
		}
	},
	onShow() {
		this.hasLogin();
	},
	onLoad() {
		uni.setNavigationBarTitle({
			title: this.i18n('修改密码')
		});
		uni.hideShareMenu();
		this.hasLogin();
		this.getUserInfo();
	},
	methods: {
		hasLogin() {
			this.isLogin = getApp().globalData.token ? true : false;
			if (!this.isLogin) {
				uni.navigateTo({
					url: '../login/login'
				});
			}
		},
		i18n(v) {
			return this.$t('index')[v];
		},
		timeupChangeHandle(v) {
			this.forgotPassword.isCountDown = false;
		},
		toggleRegPasswordShow() {
			this.forgotPassword.isPasswordShow = this.forgotPassword.isPasswordShow ? false : true;
		},
		getVICodeClickHandle() {
			let that = this;
			if (this._plugins.isEmpty(this.forgotPassword.account)) {
				this.error.account = {
					Is: true,
					message: this.i18n('手机号码') + this.i18n('不能为空')
				};
				return;
			} else if (!this._plugins.isTelphoneCode(this.forgotPassword.account)) {
				this.error.account = {
					Is: true,
					message: this.i18n('请输入正确的') + this.i18n('手机号码')
				};
				return;
			}
			uni.showLoading({
				title: this.i18n('正在发送中') + '...',
				mask: true,
				complete() {
					that.requestData(['getSMSVICodeHandle'])
						.then(v => ((that.forgotPassword.isCountDown = true), (that.forgotPassword.smsVerificatCode = v[0].data.code)))
						.catch(v => {
							that.$toast(v);
							console.log(v);
						});
				}
			});
		},
		getUserInfo() {
			let that = this;
			uni.showLoading({
				title: this.i18n('正在发送中') + '...',
				mask: true,
				complete() {
					that.requestData(['getUserInfoData'])
						.then(v => {
							that.forgotPassword.account = v[0].data.info.account;
						})
						.catch(v => {
							console.log(v);
						})
						.finally(v => {
							setTimeout(() => {
								uni.hideLoading();
								uni.stopPullDownRefresh();
							}, 1000);
						});
				}
			});
		},
		requestData(func, v) {
			return this._plugins.requstData(this, func, v);
		},
		submitForgotPasswordClickHandle(e) {
			let that = this;
			if (this._plugins.isEmpty(this.forgotPassword.account)) {
				this.error.account = {
					Is: true,
					message: this.i18n('手机号码') + this.i18n('不能为空')
				};
				return;
			} else if (!this._plugins.isTelphoneCode(this.forgotPassword.account)) {
				this.error.account = {
					Is: true,
					message: this.i18n('请输入正确的') + this.i18n('手机号码')
				};
				return;
			} else if (!this.forgotPassword.isCountDown) {
				this.error.countDown = {
					Is: true,
					message: this.i18n('请使用') + this.i18n('短信验证码')
				};
				return;
			} else if (this._plugins.isEmpty(this.forgotPassword.verificatCode)) {
				this.error.verificatCode = {
					Is: true,
					message: this.i18n('短信验证码') + this.i18n('不能为空')
				};
				return;
			} else if (this.forgotPassword.verificatCode !== this.forgotPassword.smsVerificatCode) {
				this.error.verificatCode = {
					Is: true,
					message: this.i18n('短信验证码') + this.i18n('错误')
				};
				return;
			} else if (this._plugins.isEmpty(this.forgotPassword.oldPassword)) {
				this.error.oldPassword = {
					Is: true,
					message: this.i18n('密码') + this.i18n('不能为空')
				};
				return;
			} else if (!this._plugins.isPassword(this.forgotPassword.oldPassword)) {
				this.error.oldPassword = {
					Is: true,
					message: this.i18n('密码') + this.i18n('格式/长度不对')
				};
				return;
			} else if (this._plugins.isEmpty(this.forgotPassword.password)) {
				this.error.password = {
					Is: true,
					message: this.i18n('密码') + this.i18n('不能为空')
				};
				return;
			} else if (!this._plugins.isPassword(this.forgotPassword.password)) {
				this.error.password = {
					Is: true,
					message: this.i18n('密码') + this.i18n('格式/长度不对')
				};
				return;
			} else if (this._plugins.isEmpty(this.forgotPassword.repassword)) {
				this.error.repassword = {
					Is: true,
					message: this.i18n('密码') + this.i18n('不能为空')
				};
				return;
			} else if (!this._plugins.isPassword(this.forgotPassword.repassword)) {
				this.error.repassword = {
					Is: true,
					message: this.i18n('密码') + this.i18n('格式/长度不对')
				};
				return;
			} else if (this.forgotPassword.repassword !== this.forgotPassword.password) {
				this.error.repassword = {
					Is: true,
					message: this.i18n('密码') + this.i18n('不相同')
				};
				return;
			}
			uni.showLoading({
				title: this.i18n('正在提交中') + '...',
				mask: true,
				complete() {
					that.requestData(
						['submitEditPasswordHandle'],
						that._plugins.extend(
							{},
							{
								account: that.forgotPassword.account,
								oldPassword: that._plugins.hexMD5(that.forgotPassword.oldPassword),
								password: that._plugins.hexMD5(that.forgotPassword.password),
								repassword: that._plugins.hexMD5(that.forgotPassword.repassword),
								verificatCode: that.forgotPassword.verificatCode
							}
						)
					)
						.then(v => {
							['token', 'uid', 'username', 'password', 'userInfo'].forEach(n => {
								getApp().globalData[n] = null;
							});
							uni.setStorageSync('globalData', JSON.stringify(getApp().globalData));
							uni.navigateBack({
								delta:1
							})
						})
						.catch(v => {
							that.$toast(v);
							console.log(v);
						});
				}
			});
		},
		cancleClickHandle() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="less">
.custom_forgotpassword {
	.custom_forgotpassword_content {
		font-size: 28rpx;
		.custom_forgotpassword_content_title {
			padding: 120rpx 0 100rpx 0;
			text-align: center;
		}
		.custom_forgotpassword_content_list {
			padding: 10rpx 30rpx;
			.error_tips {
				color: #fb3640;
				font-size: 28rpx;
				text-align: left;
				padding: 10rpx 0;
				.iconfont {
					display: inline;
					margin: 0 10rpx 0 0;
				}
			}
			.custom_forgotpassword_content_list_input {
				padding: 10rpx 0;
				border-bottom: 2rpx #efefef solid;
				&.telphone {
					display: flex;
					.telphone_tip {
						width: 100rpx;
						padding: 20rpx;
						text-align: right;
						border-right: 2rpx #efefef solid;
						color: #cccccc;
					}
					.telphone_input {
						flex: 1;
						input {
							padding: 10rpx;
							margin: 10rpx;
							text-align: left;
						}
					}
				}
				&.verifica_code {
					display: flex;
					.verifica_code_input {
						flex: 1;
						input {
							padding: 10rpx;
							margin: 10rpx;
							text-align: left;
						}
					}
					.verifica_code_button {
						width: 260rpx;
						&.iconfont {
							width: 100rpx;
							.toggle_show {
								font-size: 42rpx;
							}
						}
						.uni-countdown {
							padding: 16rpx 0 0;
						}
						.verifica_code_button_content {
							text-align: center;
							color: #999999;
							line-height: 65rpx;
							padding: 10rpx;
							&.button {
								text-align: center;
								border-radius: 10rpx;
								background-color: #f9b208;
								padding: 10rpx 20rpx;
								margin: 10rpx;
								color: #333333;
								line-height: normal;
							}
						}
					}
				}
			}
		}
		.custom_forgotpassword_content_list_item {
			padding: 20rpx 30rpx;
			text-align: center;
			.submit_button {
				padding: 20rpx 20rpx;
				text-align: center;
				background-color: #f9b208;
				border-radius: 10rpx;
				margin: 10rpx auto;
			}
			.cancle_button {
				padding: 20rpx 20rpx;
				text-align: center;
				background-color: #efefef;
				border-radius: 10rpx;
				margin: 10rpx auto;
			}
		}
	}
}
</style>
